<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="txt">
  <span></span>
</body>
<script>
  // 密码强度：数字，字母，特殊
  // 一种，差
  // 两种，中
  // 三种，强

  var txt = document.querySelector(".txt");
  var span = document.querySelector(".txt").nextElementSibling;

  // 输入框的输入事件
  txt.oninput = function(){
    // 获取输入框内容
    var str = this.value;
    // 当输入框为空时
    if(str === ""){
      // 清除提示
      span.innerHTML = "";
      // 并结束
      return;
    }

    // 准备变量记录是否出现某种字符
    var a=0,b=0,c=0;

    // 遍历输入框中的内容
    for(var i=0;i<str.length;i++){
      // 判断是否出现数字
      if(str[i] >= 0 && str[i] <= 9){
        // 记录数字
        a=1;
      }
      // 判断是否出现字母
      if((str[i] >= "a" && str[i] <= "z") || (str[i] >= "A" && str[i] <= "Z")){
        // 记录字母
        b=1;
      }
      // 判断是否出现特殊
      if( !(str[i] >= 0 && str[i] <= 9 || str[i] >= "a" && str[i] <= "z" || str[i] >= "A" && str[i] <= "Z") ){
        // 记录特殊
        c=1;
      }
    }

    // 将记录结果加起来，根据和判断强度
    switch(a+b+c){
      case 1:span.innerHTML = "差";break;
      case 2:span.innerHTML = "中";break;
      case 3:span.innerHTML = "强";break;
    }

  }


</script>
</html>